<template>
  <div class="oBox" :id="uid" :style="style"></div>
</template>
<script setup>
import * as echarts from "echarts";

// 因为是封装的组件，会多次调用，id不能重复，要在初始化之前写，不然会报错dom为定义
let uid = ref(null);
onBeforeMount(() => {
  uid.value = `echarts-uid-${parseInt(Math.random() * 1000000)}`;
  // 也可以用毫秒数作为id
  // uid.value = `echarts-uid-${new Date().getTime()}`;
});

onMounted(() => {
  let myChart = echarts.init(document.getElementById(uid.value));
  // 在template中可以直接取props中的值，但是在script中不行，因为script是在挂载之前执行的
  myChart.setOption(props.myOption, {
    notMerge: true, //不和之前的option合并
  });

  // 监听页面的大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
  // myChart.on("click", function (params) {
  //   clearInterval(scroll);

  //   /*提示框获取显示索引*/
  //   myChart.dispatchAction({
  //     type: "showTip",
  //     seriesIndex: 0,
  //     dataIndex: params.dataIndex,
  //   });
  //   myChart.setOption(props.myOption);
  // });
  document
    .getElementsByClassName("oBox")[0]
    .addEventListener("mouseenter", function (e) {
      clearInterval(scroll);
    });

  document
    .getElementsByClassName("oBox")[0]
    .addEventListener("mouseleave", function (e) {
      scroll = setInterval(() => {
        scrollTable();
      }, 2000);
    });
  var scroll = setInterval(() => {
    scrollTable();
  }, 2000);

  let scrollTable = function () {
    let startValue = props.myOption.dataZoom[0].startValue;
    let endValue = props.myOption.dataZoom[0].endValue;
    let start = props.myOption.yAxis.data[startValue]; //起始y轴
    let end = props.myOption.yAxis.data[endValue]; //结束y轴
    //   /*bardata.title.length 为y轴数据长度 */

    if (startValue == Math.ceil(props.myOption.yAxis.data.length / 2) - 1) {
      props.myOption.dataZoom[0].endValue = 3;
      props.myOption.dataZoom[0].startValue = 0;
    } else {
      props.myOption.dataZoom[0].endValue =
        props.myOption.dataZoom[0].endValue + 1;
      props.myOption.dataZoom[0].startValue =
        props.myOption.dataZoom[0].startValue + 1;
    }
    //   /*提示框跟随*/

    myChart.setOption(props.myOption);
  };
  // // /* 用户拖动滚动条或者点击事件，暂停自动滚动不再触发 */
  // myChart.on("datazoom", function (params) {
  //   clearInterval(scroll);
  // });
});
const props = defineProps({
  style: {
    type: Object,
    default: () => ({
      width: "100%",
      height: "100%",
    }),
  },
  myOption: {
    type: Object,
    default: () => ({}),
  },
});
</script>
<style lang="scss" scoped></style>
